<template>
  <div>
    <home-nav-bar></home-nav-bar>
    <div class="banner">
      <img src="@/assets/img/home/banner.webp" alt="" />
    </div>
    <!-- <home-position-bar :hot-suggests="hotSuggests"></home-position-bar> -->
    <home-position-bar></home-position-bar>
    <home-categories></home-categories>
    <div class="showSearchBar" v-if="isShowSearchBar">
      <search-bar></search-bar>
    </div>
    <home-content></home-content>
    <!-- <button @click="btnLoadMore">加载更多页面</button> -->
  </div>
</template>

<script setup>
import HomeNavBar from "./cpn/home-nav-bar.vue";
import HomePositionBar from "./cpn/home-position-bar.vue";
import homeCategories from "./cpn/home-categories.vue";
import homeContent from "@/views/Home/cpn/home-content.vue";
import SearchBar from "@/components/search-bar/search-bar.vue";
import { ref } from "@vue/reactivity";
import { computed, onMounted, onUnmounted, watch } from "vue";
import HYRequest from "@/services/request/index";
import useHomeStore from "@/stores/modules/home";
import useScroll from "@/hooks/useScroll.js";
import { getScrollTop } from "vant/lib/utils";

// 1.发送热门数据请求
// const hotSuggests = ref([]);
// HYRequest.get({`
//   url: "/home/hotSuggests",
// })
//   .then((res) => {
//     hotSuggests.value = res.data;
//   })
//   .catch((err) => {
//     console.log(err);
//   });
// let currentpage = 1;

const homeStore = useHomeStore();
homeStore.fetchHotSuggestsData();
homeStore.fecthCategories();
homeStore.FetchHoustLists();

// 模拟加载更多
// function btnLoadMore() {
//   console.log("加载更多页面");
//   // currentpage++;
//   homeStore.FetchHoustLists();
// }

// 2.发送推荐数据
// const categories = ref([]);
// HYRequest.get({
//   url: "/home/categories",
// })
//   .then((res) => {
//     console.log(res);
//     categories.value = res.data;
//   })
//   .catch((err) => {
//     console.log(err);
//   });

// 3.监听window的滚动
/* 
问题:
    1.离开页面,需要移除监听
    2.如果别的页面进行类似的监听,会编写重复的代码
*/
// const scrollListenerHandler = () => {
//   const clientHeight = document.documentElement.clientHeight;
//   const scrollTop = document.documentElement.scrollTop;
//   const scrollHeight = document.documentElement.scrollHeight;
//   // console.log(clientHeight, scrollTop, scrollHeight);
//   if (clientHeight + Math.ceil(scrollTop) >= scrollHeight) {
//     homeStore.FetchHoustLists();
//   }
// };

// onMounted(() => {
//   window.addEventListener("scroll", scrollListenerHandler);
// });

// onUnmounted(() => {
//   window.removeEventListener("scroll", scrollListenerHandler);
// });

// 4.使用hooks解决滚动加载更多事件
// 4.1使用回调
// useScroll(() => {
//   homeStore.FetchHoustLists();
// });

// 4.2 使用监听
const { isReachBottom } = useScroll();
watch(isReachBottom, (newVal, oldVal) => {
  if (newVal) {
    homeStore.FetchHoustLists().then(() => {
      isReachBottom.value = false;
    });
  }
});

// 5.是否展示搜索框
// 5.1使用watch
// const isShowSearchBar = ref(false);
// const { scrollTop, scrollHeight, clientHeight } = useScroll();

// watch(scrollTop, (newValue, oldValue) => {
//   if (scrollTop.value >= 100) {
//     // console.log(scrollHeight, scrollTop, clientHeight);
//     isShowSearchBar.value = true;
//   }
// });

// 5.2 使用计算属性
const { scrollTop } = useScroll();
const isShowSearchBar = computed(() => {
  return scrollTop.value >= 100;
});
</script>

<style scoped lang="less">
.banner {
  img {
    width: 100%;
  }
}
.showSearchBar {
  height: 45px;
  background-color: #fff;
  padding: 16px 10px 6px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
}
</style>
